<template>
  <!-- 外业时间设置 -->
  <div class="app-container-add">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap" :style="{width:mainContentWidth + 'px','left':'80px'}">
      <el-col :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="middle" @click="handleSave">保存</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div class="main-content">
      <el-card ref="mainContent" class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>外业时间设置</span>
        </div>
        <div class="main-content-body">
          <el-row :gutter="20" class="content">
            <el-col :span="8" :offset="2">
              <el-form ref="formData" class="dataForm" :rules="rules" :model="formData" label-width="110px">
                <div class="data-form-item">
                  <el-row :gutter="20">
                    <el-col :lg="24">
                      <el-form-item label="上午时间" prop="forenoonStartTime">
                        <el-time-picker
                          v-model="morning"
                          size="medium"
                          is-range
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围"
                          style="width:100%"
                          value-format="HH:mm:ss"
                          @change="morningChange"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :lg="24">
                      <el-form-item label="中午时间" prop="noonStartTime">
                        <el-time-picker
                          v-model="noonday"
                          size="medium"
                          is-range
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围"
                          style="width:100%"
                          value-format="HH:mm:ss"
                          @change="noondayChange"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :lg="24">
                      <el-form-item label="下午时间" prop="afternoonStartTime">
                        <el-time-picker
                          v-model="afternoon"
                          size="medium"
                          is-range
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          placeholder="选择时间范围"
                          style="width:100%"
                          value-format="HH:mm:ss"
                          @change="afternoonChange"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </el-col>
            <el-col :offset="2" :span="8">
              <div class="tips-wap">
                <div class="title">温馨提示</div>
                <div class="info">
                  <p>请按照认真填写外业时间设置</p>
                  <p>外业时间设置是对每日现场照片的校验</p>
                  <p>设置的数据将影响您的数据录入</p>
                </div>
                <div class="img">
                  <img :src="person">
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
// 页面接口
import { addTimeSetting, getTimeSetting } from '@/api/superviseBaseInfo/timeSetting'
import person from '@/assets/image/person.png'
export default {
  components: {
  },
  data() {
    return {
      mainContentWidth: '',
      person,
      title: '', // 页面标题
      morning: '', // 早上
      noonday: '', // 中午
      afternoon: '', // 下午
      /* 表单 start*/
      formData: {
        forenoonStartTime: '', // 早上开始
        forenoonEndTime: '', // 早上结束
        noonStartTime: '', // 中午开始
        noonEndTime: '', // 中午结束
        afternoonStartTime: '', // 下午开始
        afternoonEndTime: '' // 下午结束
      },
      rules: { // 表单验证提示
        forenoonStartTime: [
          { required: true, message: '上午时间不得为空', trigger: 'blur' }
        ],
        noonStartTime: [
          { required: true, message: '中午时间不得为空', trigger: 'blur' }
        ],
        afternoonStartTime: [
          { required: true, message: '下午时间不得为空', trigger: 'blur' }
        ]
      }
      /* 表单 end*/
    }
  },
  mounted() {
    /** 获取主题内容宽度 start*/
    setTimeout(() => {
      this.mainContentWidth = this.$refs.mainContent.$el.offsetWidth
    }, 200)
    const that = this
    window.onresize = () => {
      return (() => {
        that.mainContentWidth = that.$refs.mainContent.$el.offsetWidth
      })()
    }
    /** 获取主题内容宽度 end*/

    this.handleDetail()
  },
  methods: {
    // 上午时间变化
    morningChange(e) {
      this.formData.forenoonStartTime = e[0]
      this.formData.forenoonEndTime = e[1]
    },
    // 中午时间变化
    noondayChange(e) {
      this.formData.noonStartTime = e[0]
      this.formData.noonEndTime = e[1]
    },
    // 下午时间变化
    afternoonChange(e) {
      this.formData.afternoonStartTime = e[0]
      this.formData.afternoonEndTime = e[1]
    },
    // 获取设置过的时间
    handleDetail() {
      getTimeSetting().then(res => {
        if (res.data) {
          console.log(res.data)
          const { forenoonStartTime, forenoonEndTime, noonStartTime,
            noonEndTime, afternoonStartTime, afternoonEndTime } = res.data
          this.morning = [forenoonStartTime, forenoonEndTime]
          this.noonday = [noonStartTime, noonEndTime]
          this.afternoon = [afternoonStartTime, afternoonEndTime]
          this.formData = { ...res.data }
        }
      })
    },
    // 顶部按钮
    // 保存
    handleSave() {
      this.$refs.formData.validate(async valid => {
        if (valid) {
          const res = await addTimeSetting(this.formData)
          this.msgSuccess(res.message)
        }
      })
    }
  }

}

</script>

<style lang="scss">
  .content{
    padding-top: 20px;
  }
  .dataForm {
    margin-top: 30px;
    .el-form-item{
      margin: 0;
      .el-select{
        width: 100%;
      }
    }
  }
  .tips-wap{
    border-left:1px solid #eee;
    text-align: center;
    height: 100%;
    .title{
      font-size: 32px;
      line-height: 40px;
    }
    .info{
      p{
        font-size: 16px;
        line-height: 18px;
      }
    }
    .img{
      width: 50%;
      margin: 0 auto;
      img{
        width: 100%;
        height: auto;
      }
    }
  }
</style>
